<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :model="filters" :inline="true">
        <el-form-item>
          <el-input v-model="filters.keywords" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" v-on:click="getCourses">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addHandler">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onLineCourse">上线</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="offLineCourse">下线</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="uploadResources">上传资源</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="killCourseModelView" >秒杀</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表v-loading="listLoading"-->
    <el-table @row-click="rowClick" :data="courses" v-loading="listLoading" @selection-change="selsChange"
              highlight-current-row style="width: 100%;">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.onlineLogs" style="width: calc(100% - 47px)" class="two-list">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="state" label="状态">
              <template slot-scope="props">
							  <span v-if="props.row.state ==1">
								<span style="color:#00B46D">上线</span>
							  </span>
                <span v-else>
								<span style="color:#D75C89">下线</span>
                 			 </span>
              </template>
            </el-table-column>
            <el-table-column prop="oprAdminName" label="操作人员"></el-table-column>
            <el-table-column prop="onlineTime" label="上线日期"></el-table-column>
            <el-table-column prop="offlineTime" label="下线日期"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!--多选框-->
      <el-table-column type="selection" width="55">
      </el-table-column>
      <!--索引值,为什么不用id,id不序号-->
      <el-table-column type="index" width="60">
      </el-table-column>
      <!--其他都设置值,只有一个不设置值就自动适应了-->
      <el-table-column prop="name" label="课程名称">
      </el-table-column>
      <el-table-column prop="courseType.name" label="类型">
      </el-table-column>
      <el-table-column prop="gradeName" label="等级">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template scope="scope">
          <span v-if="scope.row.status==0" style="color: blue">待审核</span>
          <span v-else-if="scope.row.status==1" style="color: orange">下线</span>
          <span v-else-if="scope.row.status==2" style="color: green">上线</span>
          <span v-else-if="scope.row.status==-1" style="color: red">审核失败</span>
          <span v-else>未知</span>
        </template>
      </el-table-column>
      <el-table-column prop="forUser" label="适用人群">
      </el-table-column>
      <!--<el-table-column prop="tenantName" label="所属机构">-->
      <!--</el-table-column>-->
      <el-table-column prop="userName" label="创建用户">
      </el-table-column>
      <el-table-column prop="startTime" label="开课时间">
      </el-table-column>
      <el-table-column prop="endTime" label="结课时间">
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template scope="scope">
          <el-button size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
          <el-button type="info" size="small" @click="showAuditLog(scope.row)">审核日志</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger">批量删除</el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total"
                     style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增界面-->
    <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" ref="addForm">
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="addForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="适用人群" prop="forUser">
          <el-input v-model="addForm.forUser" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程等级" prop="gradeId">
          <el-radio-group v-model="addForm.gradeId">
            <el-radio v-for="grade in grades" :label="grade.id">{{ grade.name }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="开课日期">
          <el-date-picker
              v-model="addForm.startTime"
              type="date"
              value-format="yyyy-MM-dd"
              size="small"
              placeholder="课程开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="节课日期">
          <el-date-picker
              v-model="addForm.endTime"
              type="date"
              value-format="yyyy-MM-dd"
              size="small"
              placeholder="课程结束日期">
          </el-date-picker>
        </el-form-item>


        <el-form-item label="收费规则" prop="gradeId">
          <el-radio-group v-model="addForm.chargeId">
            <el-radio @change="changeCharge" v-for="charge in charges" :label="charge.id">{{ charge.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="课程价格" prop="price">
          <el-input :disabled="priceDisabled" v-model="addForm.price" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程原价">
          <el-input :disabled="priceDisabled" v-model="addForm.priceOld" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="咨询QQ" prop="qq">
          <el-input v-model="addForm.qq" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
              v-model="addForm.expires"
              type="date"
              value-format="yyyy-MM-dd"
              size="small"
              placeholder="营销结束时间">
          </el-date-picker>
        </el-form-item>


        <el-form-item label="课程类型" prop="coursetTypId">
          <el-cascader
              :props="courseTypeProps"
              v-model="addForm.courseTypeId"
              placeholder="试试搜索：指南"
              :options="courseTypes"
              expand-trigger="hover"
              :show-all-levels="false"
              filterable
              change-on-select
          ></el-cascader>
        </el-form-item>

        <el-form-item prop="logo" label="课程封面">
          <!--<el-input type="text" v-model="employee.logo" auto-complete="off" placeholder="请输入logo！"></el-input>-->
          <el-upload
              class="upload-demo"
              action="http://localhost:1020/hrm/file/fastdfs/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :file-list="fileList"
              list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>


        <el-form-item label="课程简介" prop="description">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="addForm.description">
          </el-input>
        </el-form-item>

        <el-form-item label="课程详情" prop="intro">
          <div class="edit_container">
            <quill-editor
                v-model="addForm.intro"
                ref="myQuillEditor"
                class="editer"
                :options="editorOption"
                @ready="onEditorReady($event)">
            </quill-editor>
          </div>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit">提交</el-button>
      </div>
    </el-dialog>
    <el-drawer
        title="查看审核日志"
        :visible.sync="drawer"
        :direction="rtl"
        :before-close="handleClose">
      <el-table :data="auditLogs"
                highlight-current-row style="width: 100%;">
        <!--索引值,为什么不用id,id不序号-->
        <el-table-column prop="courseName" width="60" label="课程名称">
        </el-table-column>
        <el-table-column prop="state" width="60" label="状态">
          <template scope="scope">
            <span v-if="scope.row.state==-1" style="color: red">审核失败</span>
            <span v-else style="color: yellowgreen">审核成功</span>
          </template>
        </el-table-column>

        <el-table-column prop="auditAdminName" width="60" label="审核用户">
        </el-table-column>
        <el-table-column prop="auditTime" label="审核时间">
        </el-table-column>
        <el-table-column prop="note" min-width="200" label="备注">
        </el-table-column>
      </el-table>
    </el-drawer>

    <el-dialog title="添加秒杀课程" :visible.sync="killCourseFormVisible"  :close-on-click-modal="false">
      <el-form :model="killCourseForm" label-width="80px"  ref="addFormKill">
        <el-form-item label="课程名字" prop="price">
          <el-input :disabled="true"  v-model="killCourseForm.courseName" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="秒杀价格" prop="price">
          <el-input  v-model="killCourseForm.killPrice" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="秒杀数量" prop="name">
          <el-input v-model="killCourseForm.killCount" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="开始时间" >
          <el-date-picker
              v-model="killCourseForm.startTime"
              type="date"
              value-format="yyyy-MM-dd"
              size="small"
              placeholder="课程开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" >
          <el-date-picker
              v-model="killCourseForm.endTime"
              type="date"
              value-format="yyyy-MM-dd"
              size="small"
              placeholder="课程结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="killCourseFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addKillCourseSubmit" >提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {quillEditor} from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"

export default {
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  components: {//使用编辑器
    quillEditor
  },
  data() {
    return {
      killCourseFormVisible:false,
      //images:[xxx.jgp,xxxx,jpg,xxxx.jpg],
      killCourseForm:{
        courseId:"",
        killCount:"",
        startTime:"",
        endTime:"",
        killPrice:"",
        courseName:"",
        coursePic:""
      },
      sels: [],//列表选中列
      auditLogs: [],
      drawer: false,
      row: "",
      courseTypeProps: {
        value: "id",
        label: "name"
      },
      priceDisabled: true,
      editorOption: {},//富文本编辑框配置
      grades: [{"id": 1, "name": "黑铁"},
        {"id": 2, "name": "青铜"},
        {"id": 3, "name": "白银"},
        {"id": 4, "name": "铂金"}],
      charges: [
        {"id": 1, "name": "免费"},
        {"id": 2, "name": "收费"}
      ],
      courseTypes: [],
      addFormVisible: false,
      //images:[xxx.jgp,xxxx,jpg,xxxx.jpg],
      addForm: {
        startTime: '',
        endTime: '',
        expires: '',
        name: '',
        forUser: '',
        gradeId: 1,
        courseTypeId: 1,
        description: '',
        intro: '',
        chargeId: 1,
        price: '',
        priceOld: '',
        qq: '',
        pic: ''
      },
      listLoading: false,
      //查询对象
      filters: {
        keywords: ''
      },
      page: 1,//当前页,要传递到后台的
      total: 0, //分页总数
      courses: [], //当前页数据
    }
  },
  methods: {
    addKillCourseSubmit(){
      this.$http.put("/kill/killCourse",this.killCourseForm).then(res=>{
        var ajaxResult = res.data;
        if(ajaxResult.success){
          this.$message({
            message: '保存成功!',
            type: 'success'
          });
          this.killCourseFormVisible = false;
          this.getCourses();
        }else{
          this.$message({
            message: '上传失败!',
            type: 'error'
          });
        }
        // 清空表单原有数据
        this.killCourseForm = {
              courseId:"",
              killCount:"",
              startTime:"",
              endTime:"",
              killPrice:"",
              courseName:"",
              coursePic:""
        }
      });
    },
    killCourseModelView(){
      //获取选中的行
      if(!this.row || this.row  === ""){
        this.$message({ message: '老铁，你不选中数据，臣妾秒不了啊....',type: 'error'});
        return;
      }
      this.killCourseForm.courseId = this.row.id;
      this.killCourseForm.courseName = this.row.name;
      this.killCourseForm.coursePic = this.row.pic;
      this.killCourseFormVisible = true;

    },
    selsChange: function (sels) {
      this.sels = sels;
      console.log(this.sels)
    },
    showAuditLog(row) {
      this.drawer = true;
      let courseId = row.id;
      this.$http.get("/course/courseAuditLog/course/" + courseId)
          .then(res => {
            this.auditLogs = res.data;
          })
          .catch(res => {
            alert("系统错误！")
          })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    handleSuccess(response, file, fileList) {
      if (response.success) {
        this.addForm.pic = response.resultObj;
      } else {
        this.$message({
          message: '上传失败!',
          type: 'error'
        });
      }
    },
    addSubmit() {
      /**

       chargeId: 2
       description: "1111"
       gradeId: 1
       intro: "<p>111<img src=""
       price: "1111"
       qq: "111"
       forUser: "1"
       **/
      var gradeName;
      for (var i = 0; i < this.grades.length; i++) {
        var grade = this.grades[i];
        if (grade.id === this.addForm.gradeId) {
          gradeName = grade.name;
          break;
        }
      }

      var param = {
        course: {
          courseTypeId: this.addForm.courseTypeId,
          name: this.addForm.name,
          forUser: this.addForm.forUser,
          gradeId: this.addForm.gradeId,
          gradeName: gradeName,
          pic: this.addForm.pic,
          startTime: this.addForm.startTime,
          endTime: this.addForm.endTime
        },
        courseDetail: {
          description: this.addForm.description,
          intro: this.addForm.intro
        },
        courseMarket: {
          charge: this.addForm.chargeId,
          qq: this.addForm.qq,
          price: this.addForm.price,
          priceOld: this.addForm.priceOld,
          expires: this.addForm.expires
        }
      };

      this.$http.put("/course/course", param).then(res => {
        var ajaxResult = res.data;
        if (ajaxResult.success) {
          this.$message({
            message: '保存成功!',
            type: 'success'
          });
          this.addFormVisible = false;
          this.getCourses();
        } else {
          this.$message({
            message: '系统错误!',
            type: 'error'
          });
        }
      });
    },
    getCourseTypes() {
      this.$http.get("/course/courseType/treeData").then(result => {
        this.courseTypes = result.data;
      });
    },
    changeCharge(chargeId) {
      console.log(chargeId);
      if (chargeId === 1) {
        this.priceDisabled = true;
        this.addForm.price = "";
        this.addForm.priceOld = "";
      } else {
        this.priceDisabled = false;
      }
    },
    onEditorReady(editor) {
      //当富文本编辑框初始化好执行
    },
    addHandler() {
      this.addFormVisible = true;
    },
    handleCurrentChange(curentPage) {
      this.page = curentPage;
      this.getCourses();
    },
    getCourses() {
      //发送Ajax请求后台获取数据  axios
      //添加分页条件及高级查询条件
      let para = {
        "page": this.page,
        "keyword": this.filters.keywords
      };
      this.listLoading = true; //显示加载圈
      //分页查询
      this.$http.post("/course/course/list", para) //$.Post(.....)
          .then(result => {
            this.total = result.data.total;
            this.courses = result.data.rows;
            this.listLoading = false;  //关闭加载圈
          });
    },
    onLineCourse() {
      //获取选中的行
      if (this.sels.length===0) {
        this.$message({message: '老铁，你不选中数据，臣妾上不了啊....', type: 'error'});
        return;
      }

      let ids = this.sels.map(item => item.id);
      this.$http.post("/course/course/online",ids).then(res => {
        var ajaxResult = res.data;
        if (ajaxResult.success) {
          this.$message({message: '老铁，上线成功.', type: 'success'});
          this.getCourses();
        } else {
          this.$message({message: ajaxResult.message, type: 'error'});
        }
      })
    },
    offLineCourse() {
      //获取选中的行
      if (this.sels.length===0) {
        this.$message({message: '老铁，你不选中数据，臣妾下不了啊....', type: 'error'});
        return;
      }
      let ids = this.sels.map(item => item.id);
      this.$http.post("/course/course/offline",ids).then(res => {
        var ajaxResult = res.data;
        if (ajaxResult.success) {
          this.$message({message: '老铁，下线成功.', type: 'success'});
          this.getCourses();
        } else {
          this.$message({message: ajaxResult.message, type: 'error'});
        }
      })
    },
    rowClick(row) {
      this.row = row;
      console.log(this.row);
    }
  },
  mounted() {
    this.getCourses();
    this.getCourseTypes();
  }
}

</script>

<style scoped>

</style>
